AK-21/Graphite-Industrial-Intelligence

1.counter {2  font-size: 16px;3  padding: 5px 10px;4  border-radius: 5px;5  color: var(--accent);6  background: var(--accent-bg);7  border: 2px solid transparent;8  transition: border-color 0.3s;9  margin-bottom: 24px;10 11  &:hover {12    border-color: var(--accent-border);13  }14  &:focus-visible {15    outline: 2px solid var(--accent);16    outline-offset: 2px;17  }18}19 20.hero {21  position: relative;22 23  .base,24  .framework,25  .vite {26    inset-inline: 0;27    margin: 0 auto;28  }29 30  .base {31    width: 170px;32    position: relative;33    z-index: 0;34  }35 36  .framework,37  .vite {38    position: absolute;39  }40 41  .framework {42    z-index: 1;43    top: 34px;44    height: 28px;45    transform: perspective(2000px) rotateZ(300deg) rotateX(44deg) rotateY(39deg)46      scale(1.4);47  }48 49  .vite {50    z-index: 0;51    top: 107px;52    height: 26px;53    width: auto;54    transform: perspective(2000px) rotateZ(300deg) rotateX(40deg) rotateY(39deg)55      scale(0.8);56  }57}58 59#center {60  display: flex;61  flex-direction: column;62  gap: 25px;63  place-content: center;64  place-items: center;65  flex-grow: 1;66 67  @media (max-width: 1024px) {68    padding: 32px 20px 24px;69    gap: 18px;70  }71}72 73#next-steps {74  display: flex;75  border-top: 1px solid var(--border);76  text-align: left;77 78  & > div {79    flex: 1 1 0;80    padding: 32px;81    @media (max-width: 1024px) {82      padding: 24px 20px;83    }84  }85 86  .icon {87    margin-bottom: 16px;88    width: 22px;89    height: 22px;90  }91 92  @media (max-width: 1024px) {93    flex-direction: column;94    text-align: center;95  }96}97 98#docs {99  border-right: 1px solid var(--border);100 101  @media (max-width: 1024px) {102    border-right: none;103    border-bottom: 1px solid var(--border);104  }105}106 107#next-steps ul {108  list-style: none;109  padding: 0;110  display: flex;111  gap: 8px;112  margin: 32px 0 0;113 114  .logo {115    height: 18px;116  }117 118  a {119    color: var(--text-h);120    font-size: 16px;121    border-radius: 6px;122    background: var(--social-bg);123    display: flex;124    padding: 6px 12px;125    align-items: center;126    gap: 8px;127    text-decoration: none;128    transition: box-shadow 0.3s;129 130    &:hover {131      box-shadow: var(--shadow);132    }133    .button-icon {134      height: 18px;135      width: 18px;136    }137  }138 139  @media (max-width: 1024px) {140    margin-top: 20px;141    flex-wrap: wrap;142    justify-content: center;143 144    li {145      flex: 1 1 calc(50% - 8px);146    }147 148    a {149      width: 100%;150      justify-content: center;151      box-sizing: border-box;152    }153  }154}155 156#spacer {157  height: 88px;158  border-top: 1px solid var(--border);159  @media (max-width: 1024px) {160    height: 48px;161  }162}163 164.ticks {165  position: relative;166  width: 100%;167 168  &::before,169  &::after {170    content: '';171    position: absolute;172    top: -4.5px;173    border: 5px solid transparent;174  }175 176  &::before {177    left: 0;178    border-left-color: var(--border);179  }180  &::after {181    right: 0;182    border-right-color: var(--border);183  }184}185