style.css

* { box-sizing: border-box; }

html {
  font-size: 62.5%; /* 10px */
  overflow-y: auto;
  background: #fcfbfa;
}

html:before {
  content: '';
  background: #0b1d56;
  position: absolute;
  width: 100%;
  height: 20rem;
  z-index: 0;
}

body {
  font: 1.6rem -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif; /* 16px */
  padding: 0;
  margin: 0;
}

a,
a:hover,
a:focus,
a:active,
a:visited {
  color: #041c46;
}

body::-webkit-scrollbar {
  width: .7rem;
  background-color: none;
  border-radius: 1rem;
}

body::-webkit-scrollbar-track {
  box-shadow: inset 0 0 6px rgba(0 0 0 / 5%);
}

body::-webkit-scrollbar-thumb {
  width: .5rem;
  background-color: #89a;
  border: 2px solid #041c46;
  border-radius: 1rem;
  height: 20%;
}


/* -- BASE -- */
/* layout */
.region {
  width: 100%;
}

.block {
  width: 80%;
  margin-left: auto;
  margin-right: auto;
}

.body-content-wrapper {
  width: 94%;
  max-width: 1200px;
  margin: 0 auto 10rem;
  background: #041c46 no-repeat center 120% / 100% url("cold-start-bg.jpg");
  padding: 7rem;
  padding-top: 5rem;
  padding-bottom: 35rem;
  border-radius: 15px;
  box-shadow: 0 0 20px rgba(0 0 0 / 10%);
  position: relative;
  min-height: 80vh;
  border: 1px solid rgba(255 255 255 / 30%);
}

/* modals */
.modal-curtain {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  outline: 0;
  background: rgba(0 0 0 / 60%);
  z-index: 900;
  transition: .5s all;
}

.console-hide .modal-curtain {
  width: 0;
  background: rgba(0 0 0 / 0%);
}

/* behaviors */
.flex {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
}

.hide,
.hide-children > div {
  display: none;
}

.show {
  display: block !important;
}

/* elements */
.button {
  user-select: none;
  padding: 2rem 2.5rem;
  background: rgba(255 255 255 / 15%);
  border: 1px solid rgba(255 255 255 / 25%);
  border-radius: 3px;
  text-decoration: none;
  font-size: 1.8rem;
}

.tooltip {
  white-space: nowrap;
  position: absolute;
  bottom: .5rem;
  left: 150%;
  padding: 1rem;
  opacity: 0;
  background: #000;
  transition: .2s ease-in opacity;
  font-size: 1.2rem;
  font-weight: 500;
}


/* -- HEADER -- */
#header-block {
  position: relative;
  justify-content: space-between;
  align-items: center;
  flex-wrap: nowrap;
  max-width: 140rem;
  padding: 4rem 2rem;
  margin: 0 auto;
  background: #173fc2;
  z-index: 100;
}

.logo {
  user-select: none;
  background: url("logo-white.svg") no-repeat 0 / 150px;
  width: 150px;
  height: 30px;
  cursor: pointer;
  transition: .2s scale;
}

.logo:hover {
  scale: 110%;
  transition: .2s scale;
}


/* -- APP ITEMS -- */
.app-item-icon {
  position: relative;
  height: 16px;
  width: 16px;
  padding: 0;
  margin: 0 1rem;
  cursor: pointer;
  opacity: .5;
  scale: 1.2;
  transition: ease-in .2s all;
}

.app-item-icon:hover {
  opacity: 1;
}

.app-item-icon .tooltip {
  left: initial;
  right: 0;
  bottom: -5rem;
}

.app-item-icon:hover .tooltip {
  opacity: 1;
}

.mode-toggle {
  background-image: url("data:image/svg+xml,%3Csvg width='16' height='16' viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cg clip-path='url(%23clip0_68_17)'%3E%3Cpath d='M8.51739 2.50508C8.60127 2.50508 8.68451 2.50508 8.76712 2.50508C7.95079 3.26361 7.42608 4.28422 7.28418 5.38949C7.14229 6.49476 7.39219 7.61481 7.99044 8.55494C8.58869 9.49507 9.49747 10.1958 10.5588 10.5354C11.6201 10.875 12.7669 10.832 13.7998 10.4138C13.4025 11.3698 12.7531 12.2 11.9209 12.8159C11.0888 13.4318 10.105 13.8102 9.07461 13.9109C8.04422 14.0115 7.00584 13.8305 6.07024 13.3873C5.13463 12.944 4.3369 12.2551 3.76213 11.394C3.18736 10.5329 2.85711 9.53196 2.80661 8.4979C2.75612 7.46384 2.98727 6.43547 3.4754 5.52248C3.96354 4.60949 4.69036 3.84613 5.57833 3.31383C6.46629 2.78153 7.4821 2.50025 8.51739 2.5V2.50508Z' fill='white'/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='clip0_68_17'%3E%3Crect width='16' height='16' fill='white'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E");
}

.help-icon {
  background-image: url("data:image/svg+xml,%3Csvg width='16' height='16' viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cg clip-path='url(%23clip0_67_20)'%3E%3Cpath d='M5.33301 5.3335C5.33301 4.80306 5.57884 4.29436 6.01643 3.91928C6.45401 3.54421 7.0475 3.3335 7.66634 3.3335H8.33301C8.95185 3.3335 9.54534 3.54421 9.98292 3.91928C10.4205 4.29436 10.6663 4.80306 10.6663 5.3335C10.6909 5.76633 10.5741 6.19543 10.3337 6.55615C10.0932 6.91687 9.74199 7.18968 9.33301 7.3335C8.92402 7.52525 8.57285 7.889 8.33237 8.36996C8.09188 8.85092 7.97513 9.42305 7.99967 10.0002' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M8 12.7998V12.8065' stroke='white' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='clip0_67_20'%3E%3Crect width='16' height='16' fill='white'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E");
}


/* -- POI -- */
#poi-block {
  margin: 1rem auto;
}

.poi-card {
  position: relative;
  text-align: center;
}

.poi-card h1 {
  margin: .5rem;
}

.poi-card p {
  margin: .5rem;
}


/* -- REPORTS -- */
#reports-block {
  width: 95%;
}

#reports-block h2 {
  font-size: 1.2rem;
  font-weight: 600;
  text-transform: uppercase;
  text-align: center;
  margin: .5rem;
  margin-bottom: 1rem;
}


/* -- CARD -- */
.card {
  display: block;
  margin: .5rem;
  padding: 1rem 2rem;
  background: #fff;
  border: 1px solid #c9c8c7;
  border-left: 4px solid #041c46;
  border-radius: 5px;
  box-shadow: 1px 2px 0 rgba(0 0 0 / 6%);
  width: 30rem;
  text-decoration: none;
}

.card .name {
  text-decoration: underline;
}

.card small {
  display: block;
  margin: .5rem 0 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}


/* -- MANAGERS -- */
#managers-block {}

.managers-grid {
  gap: 1rem;
  margin: 1rem auto;
}

.managers-grid .card {
  background: #fff;
  border: 1px solid #c9c8c7;
  border-left: 4px solid #900;
  box-shadow: 5px 5px 10px rgba(0 0 0 / 7%);
}


/* -- EDGES -- */
.edge {
  height: 3rem;
  background: no-repeat center / 1px 100%;
  background-image: linear-gradient(#000, #000);
}

#reports-block .edge {
  margin-bottom: -2rem;
}

#reports-container {
  margin-top: 2rem;
  padding-top: 2rem;
  border-top: 1px solid rgba(255 255 255 / 50%);
}


/* -- AUTOCOMPLETE -- */
.autocomplete-form {
  position: relative;
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 0 6px rgba(0 0 0 / 5%);
  transition: .2s ease-in all;
}

.autocomplete {
  /*the container must be positioned relative:*/
  position: relative;
  display: inline-block;
  width: 40rem;
}

.autocomplete-input,
.autocomplete-button {
  font-size: 1.4rem;
  border: none;
  background: none;
}

.autocomplete-input {
  width: 100%;
  border: 1px solid #173fc2;
  padding: 16px;
}

.autocomplete-input::placeholder {
  font-style: italic;
}

.autocomplete-input:focus {
  outline: none;
}

.autocomplete-button {
  pointer-events: none;
  position: absolute;
  right: 1.5rem;
  top: 1.7rem;
  padding: 0 2.5rem;
  color: #041c46;
  width: 1rem;
  border-radius: 2.5rem;
  background: no-repeat 75% 50%/1.8rem;
  background-image: url("data:image/svg+xml,%3Csvg width='18' height='18' viewBox='0 0 18 18' fill='none' stroke='%23888' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M7.5 14.5147C10.9916 14.5147 13.75 11.5307 13.75 7.94121C13.75 4.35171 10.9916 1.36768 7.5 1.36768C4.00841 1.36768 1.25 4.35171 1.25 7.94121C1.25 11.5307 4.00841 14.5147 7.5 14.5147Z' stroke-width='1.5'/%3E%3Cpath d='M12.71 12.7059L16.5 16.5026' stroke-width='2.5' stroke-linecap='round'/%3E%3C/svg%3E%0A");
}

.autocomplete-items {
  position: absolute;
  top: 100%;
  right: 0;
  left: 0;
  width: 100%;
  z-index: 99;
  font-size: 1.3rem;
  border: 1px solid #6b778b;
  border-bottom: none;
  border-top: none;
}

.autocomplete-items div {
  padding: 1.4rem;
  cursor: pointer;
  background-color: #fff;
  border-bottom: 1px solid #173fc2;
  transition: .1s all;
}

.autocomplete-items div:hover {
  background-color: #e9e9e9;
}

.autocomplete-items .job-title {
  opacity: .8;
}

.autocomplete-active {
  background-color: #173fc2 !important;
  color: #fff;
}


/* -- CONSOLE -- */
.console {
  position: fixed;
  top: 2rem;
  left: 0;
  padding: 0;
  padding-bottom: 2rem;
  margin: 0;
  background: rgba(24 38 70 / 97%);
  border: 1px solid #89a;
  border-left: none;
  border-radius: 0 5px 5px 0;
  box-shadow: 0 0 20px rgba(0 0 0 / 100%), 0 0 300px 0 rgba(0 0 0 / 30%);
  min-height: 50vh;
  max-height: 97vh;
  width: 40vw;
  overflow-y: scroll;
  overflow-x: hidden;
  opacity: 1;
  z-index: 8888;
  transition: opacity ease-out .1s, left ease-out .3s;
}

.console::-webkit-scrollbar {
  width: .4rem;
  background-color: none;
  border-radius: 1rem;
}

.console::-webkit-scrollbar-track {
  box-shadow: inset 0 0 6px rgba(0 0 0 / 5%);
}

.console::-webkit-scrollbar-thumb {
  width: .4rem;
  background-color: #89a;
  border-radius: 1rem;
  height: 20%;
}

.console-hide .console {
  opacity: .7;
  left: -100%;
  transition: opacity ease-in .1s, left ease-in .3s;
}

.console-body {
  margin: 0;
  margin-top: 10rem;
}

.console .node {
  padding-left: 3rem;
  border-left: 1px dashed #567;
}

/* the EMPLOYEE node */
.console .node.employee-node {
  border-left: none;
}

.console .node .inner {
  display: inline-block;
  background: rgba(255 255 255 / 10%);
  padding: .7rem 1.3rem;
  margin: .4rem 0;
  margin-left: -.57em;
  border: 1px solid #567;
  border-radius: 3px;
  text-decoration: none;
  transition: .1s all;
}

.console .node.employee-node > a > .inner {
  width: 97%;
  font-weight: 600;
  background: #236;
  border-color: #89a;
  padding: 1rem 1rem 1rem 1.3rem;
}

.console .node:not(.employee-node) .inner {
  color: #fff;
}

.console .node:not(.employee-node) .inner:hover {
  background: rgba(255 255 255 / 15%);
  border: 1px solid #789;
  scale: 101%;
}

.console .node.employee-node .name {
  color: #fc4;
}

.console .employee-node .node .name {
  color: #fff;
  text-decoration: underline;
}

.console .node small {
  display: block;
  margin: .5rem 0 0;
  color: #aab;
}

.console-title {
  position: fixed;
  padding: 0;
  padding-left: 3rem;
  width: calc(40vw - .1rem);
  background: rgba(14 28 60 / 100%);
  border-bottom: 1px solid #456;
  border-radius: 0 4px 0 0;
  box-shadow: 0 0 10px rgba(0 0 0 / 30%);
  z-index: 999;
}

.console-title h2 {
  margin: 0;
  padding: 2rem;
}

.console-title h2::before {
  position: absolute;
  top: 2.5rem;
  left: 1.5rem;
  content: "";
  height: 16px;
  width: 16px;
  background: rgba(255 255 255 / 0%) no-repeat url("data:image/svg+xml,%3Csvg width='20' height='20' viewBox='0 0 20 20' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cg clip-path='url(%23clip0_48_17)'%3E%3Cpath d='M5.83333 12.5H4.16667C3.24619 12.5 2.5 13.2462 2.5 14.1667V15.8333C2.5 16.7538 3.24619 17.5 4.16667 17.5H5.83333C6.75381 17.5 7.5 16.7538 7.5 15.8333V14.1667C7.5 13.2462 6.75381 12.5 5.83333 12.5Z' stroke='white' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M15.8333 12.5H14.1667C13.2462 12.5 12.5 13.2462 12.5 14.1667V15.8333C12.5 16.7538 13.2462 17.5 14.1667 17.5H15.8333C16.7538 17.5 17.5 16.7538 17.5 15.8333V14.1667C17.5 13.2462 16.7538 12.5 15.8333 12.5Z' stroke='white' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M10.8333 2.5H9.16667C8.24619 2.5 7.5 3.24619 7.5 4.16667V5.83333C7.5 6.75381 8.24619 7.5 9.16667 7.5H10.8333C11.7538 7.5 12.5 6.75381 12.5 5.83333V4.16667C12.5 3.24619 11.7538 2.5 10.8333 2.5Z' stroke='white' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M5 12.5V11.6667C5 11.2246 5.17559 10.8007 5.48816 10.4882C5.80072 10.1756 6.22464 10 6.66667 10H13.3333C13.7754 10 14.1993 10.1756 14.5118 10.4882C14.8244 10.8007 15 11.2246 15 11.6667V12.5' stroke='white' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M10 7.5V10' stroke='white' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='clip0_48_17'%3E%3Crect width='20' height='20' fill='white'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E") 50% 45% ;
}

.console-close {
  user-select: none;
  position: absolute;
  top: 1.9rem;
  right: 1rem;
  height: 16px;
  width: 16px;
  padding: 16px;
  cursor: pointer;
  border-radius: 20px;
  background: rgba(45 45 70 / 0%) no-repeat center / 60% url("data:image/svg+xml,%3Csvg width='14' height='14' viewBox='0 0 14 14' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cg clip-path='url(%23clip0_48_29)'%3E%3Cpath d='M6.41667 4.0835L3.5 7.00016L6.41667 9.91683' stroke='white' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M9.91667 4.0835L7 7.00016L9.91667 9.91683' stroke='white' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='clip0_48_29'%3E%3Crect width='14' height='14' fill='white'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E");
  transition: .2s all;
}

.console-close:hover {
  background-color: rgba(255 255 255 / 5%);
  right: 1.3rem;
}

.console-toggle {
  user-select: none;
  position: absolute;
  top: .7rem;
  right: -5rem;
  height: 16px;
  width: 16px;
  cursor: pointer;
  border: 1px solid #345;
  border-radius: 20px;
  padding: 18px;
  background: rgba(255 255 255 / 10%) no-repeat url("data:image/svg+xml,%3Csvg width='20' height='20' viewBox='0 0 20 20' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cg clip-path='url(%23clip0_48_17)'%3E%3Cpath d='M5.83333 12.5H4.16667C3.24619 12.5 2.5 13.2462 2.5 14.1667V15.8333C2.5 16.7538 3.24619 17.5 4.16667 17.5H5.83333C6.75381 17.5 7.5 16.7538 7.5 15.8333V14.1667C7.5 13.2462 6.75381 12.5 5.83333 12.5Z' stroke='white' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M15.8333 12.5H14.1667C13.2462 12.5 12.5 13.2462 12.5 14.1667V15.8333C12.5 16.7538 13.2462 17.5 14.1667 17.5H15.8333C16.7538 17.5 17.5 16.7538 17.5 15.8333V14.1667C17.5 13.2462 16.7538 12.5 15.8333 12.5Z' stroke='white' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M10.8333 2.5H9.16667C8.24619 2.5 7.5 3.24619 7.5 4.16667V5.83333C7.5 6.75381 8.24619 7.5 9.16667 7.5H10.8333C11.7538 7.5 12.5 6.75381 12.5 5.83333V4.16667C12.5 3.24619 11.7538 2.5 10.8333 2.5Z' stroke='white' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M5 12.5V11.6667C5 11.2246 5.17559 10.8007 5.48816 10.4882C5.80072 10.1756 6.22464 10 6.66667 10H13.3333C13.7754 10 14.1993 10.1756 14.5118 10.4882C14.8244 10.8007 15 11.2246 15 11.6667V12.5' stroke='white' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M10 7.5V10' stroke='white' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='clip0_48_17'%3E%3Crect width='20' height='20' fill='white'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E") 50% 45% ;
  transition: .2s all;
}

.console-toggle:hover {
  background-color: rgba(255 255 255 / 20%);
  border: 1px solid #456;
  scale: 103%;
}

.console-toggle:hover .tooltip {
  opacity: 1;
}

.console-toggle .tooltip {
  bottom: .5rem;
  left: 150%;
}


/* -- COLD START MODE -- */
html.cold-start-mode {
  background-color: #041c46;
}

html.cold-start-mode .cold-start * {
  color: #fff;
}

html.cold-start-mode .body-content-wrapper {
  overflow: hidden;
}

html.cold-start-mode .cold-start {
  display: flex;
  flex-direction: column;
  width: 100%;
  margin-top: 3rem;
}

html.cold-start-mode #header-block {
  margin-bottom: 0;
}

html.cold-start-mode .cold-start h1 {
  margin: 1rem 0;
  padding: .5rem;
  font-size: 4rem;
}

html.cold-start-mode .cold-start p {
  margin: 1rem;
  padding: .5rem;
}

html.cold-start-mode .cold-start hr {
  margin: 3rem;
  opacity: .5;
}

html.cold-start-mode .cold-start .message {
  min-width: 300px;
  width: 40%;
  margin: 0 auto;
  text-align: center;
  padding-top: 0;
}

html.cold-start-mode .cold-start .point-up {
  background: no-repeat center 20px / 50%;
  background-image: url("cold-start-finger.svg");
  width: 100px;
  height: 100px;
  margin: 0 auto;
}

html.cold-start-mode .cold-start .code {
  display: inline-block;
  padding: 5px 8px;
  font-family: monospace;
  background: #111;
  color: #cb1;
}

html.cold-start-mode .cold-start .button {
  display: inline-block;
  margin-top: 1rem;
}

/* animations */
.bounce {
  animation: bounce 2s ease infinite;
}

@keyframes bounce {
  20%, 50%, 90% {transform: translateY(0);}
  40% {transform: translateY(-20px);}
  60% {transform: translateY(-12px);}
}


/* -- DARK MODE -- */
html.dark-mode {
  background-color: #041c46;
  background-color: #001640;
}

html.dark-mode * {
  color: #ccc;
}

html.dark-mode #header-block {
  background: #0b1d56;
}

html.dark-mode .poi-card h1 {
  color: #fc4;
}

html.dark-mode .card {
  background: #233256;
  border: 1px solid #567;
  border-left: 4px solid #375fe2;
  box-shadow: 1px 2px 0 rgba(0 0 0 / 12%);
  transition: .1s all;
}

html.dark-mode .card:hover {
  background: #2d3b5f;
  border: 1px solid #678;
  border-left: 4px solid #375fe2;
  scale: 101%;
}

html.dark-mode .card .name {
  color: #f9f9f9;
}

html.dark-mode .card .name small {
  color: #ccc;
}

html.dark-mode .managers-grid .card {
  border-left: 4px solid #b22;
  box-shadow: 5px 5px 10px rgba(0 0 0 / 15%);
  color: #f9f9f9;
}

html.dark-mode #matrix-manager {
  border-left-color: #999;
}

html.dark-mode .edge {
  background-image: linear-gradient(rgba(255 255 255 / 50%), rgba(255 255 255 / 50%));
}

html.dark-mode .autocomplete-form {
  background: rgba(255 255 255 / 5%);
  box-shadow: 0 0 6px rgba(0 0 0 / 15%);
}

html.dark-mode .autocomplete-form:hover {
  background: rgba(255 255 255 / 10%);
  box-shadow: 0 0 20px rgba(0 0 0 / 30%);
}

html.dark-mode .autocomplete-input {
  border-color: #041c46;
}

html.dark-mode .autocomplete-input::placeholder {
  color: rgba(255 255 255 / 60%);
}

html.dark-mode .autocomplete-button {
  background-image: url("data:image/svg+xml,%3Csvg width='18' height='18' viewBox='0 0 18 18' fill='none' stroke='%23ccc' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M7.5 14.5147C10.9916 14.5147 13.75 11.5307 13.75 7.94121C13.75 4.35171 10.9916 1.36768 7.5 1.36768C4.00841 1.36768 1.25 4.35171 1.25 7.94121C1.25 11.5307 4.00841 14.5147 7.5 14.5147Z' stroke-width='1.5'/%3E%3Cpath d='M12.71 12.7059L16.5 16.5026' stroke-width='2.5' stroke-linecap='round'/%3E%3C/svg%3E%0A");
  opacity: .8;
}

html.dark-mode .autocomplete-items {
  border-color: #041c46;
}

html.dark-mode .autocomplete-items div {
  background-color: rgba(38 58 108 / 100%);
  border-bottom-color: #041c46;
}

html.dark-mode .autocomplete-items div:hover {
  background-color: rgba(58 78 128 / 100%);
}