Underground-Digital/Workflow-Engine

1.main {2  display: flex;3  flex-direction: column;4  justify-content: space-between;5  align-items: center;6  padding: 6rem;7  min-height: 100vh;8}9 10.description {11  display: inherit;12  justify-content: inherit;13  align-items: inherit;14  font-size: 0.85rem;15  max-width: var(--max-width);16  width: 100%;17  z-index: 2;18  font-family: var(--font-mono);19}20 21.description a {22  display: flex;23  align-items: center;24  justify-content: center;25  gap: 0.5rem;26}27 28.description p {29  position: relative;30  margin: 0;31  padding: 1rem;32  background-color: rgba(var(--callout-rgb), 0.5);33  border: 1px solid rgba(var(--callout-border-rgb), 0.3);34  border-radius: var(--border-radius);35}36 37.code {38  font-weight: 700;39  font-family: var(--font-mono);40}41 42.grid {43  display: grid;44  grid-template-columns: repeat(3, minmax(33%, auto));45  width: var(--max-width);46  max-width: 100%;47}48 49.card {50  padding: 1rem 1.2rem;51  border-radius: var(--border-radius);52  background: rgba(var(--card-rgb), 0);53  border: 1px solid rgba(var(--card-border-rgb), 0);54  transition: background 200ms, border 200ms;55}56 57.card span {58  display: inline-block;59  transition: transform 200ms;60}61 62.card h2 {63  font-weight: 600;64  margin-bottom: 0.7rem;65}66 67.card p {68  margin: 0;69  opacity: 0.6;70  font-size: 0.9rem;71  line-height: 1.5;72  max-width: 34ch;73}74 75.center {76  display: flex;77  justify-content: center;78  align-items: center;79  position: relative;80  padding: 4rem 0;81}82 83.center::before {84  background: var(--secondary-glow);85  border-radius: 50%;86  width: 480px;87  height: 360px;88  margin-left: -400px;89}90 91.center::after {92  background: var(--primary-glow);93  width: 240px;94  height: 180px;95  z-index: -1;96}97 98.center::before,99.center::after {100  content: '';101  left: 50%;102  position: absolute;103  filter: blur(45px);104  transform: translateZ(0);105}106 107.logo,108.thirteen {109  position: relative;110}111 112.thirteen {113  display: flex;114  justify-content: center;115  align-items: center;116  width: 75px;117  height: 75px;118  padding: 25px 10px;119  margin-left: 16px;120  transform: translateZ(0);121  border-radius: var(--border-radius);122  overflow: hidden;123  box-shadow: 0px 2px 8px -1px #0000001a;124}125 126.thirteen::before,127.thirteen::after {128  content: '';129  position: absolute;130  z-index: -1;131}132 133/* Conic Gradient Animation */134.thirteen::before {135  animation: 6s rotate linear infinite;136  width: 200%;137  height: 200%;138  background: var(--tile-border);139}140 141/* Inner Square */142.thirteen::after {143  inset: 0;144  padding: 1px;145  border-radius: var(--border-radius);146  background: linear-gradient(to bottom right,147      rgba(var(--tile-start-rgb), 1),148      rgba(var(--tile-end-rgb), 1));149  background-clip: content-box;150}151 152/* Enable hover only on non-touch devices */153@media (hover: hover) and (pointer: fine) {154  .card:hover {155    background: rgba(var(--card-rgb), 0.1);156    border: 1px solid rgba(var(--card-border-rgb), 0.15);157  }158 159  .card:hover span {160    transform: translateX(4px);161  }162}163 164@media (prefers-reduced-motion) {165  .thirteen::before {166    animation: none;167  }168 169  .card:hover span {170    transform: none;171  }172}173 174/* Mobile and Tablet */175@media (max-width: 1023px) {176  .content {177    padding: 4rem;178  }179 180  .grid {181    grid-template-columns: 1fr;182    margin-bottom: 120px;183    max-width: 320px;184    text-align: center;185  }186 187  .card {188    padding: 1rem 2.5rem;189  }190 191  .card h2 {192    margin-bottom: 0.5rem;193  }194 195  .center {196    padding: 8rem 0 6rem;197  }198 199  .center::before {200    transform: none;201    height: 300px;202  }203 204  .description {205    font-size: 0.8rem;206  }207 208  .description a {209    padding: 1rem;210  }211 212  .description p,213  .description div {214    display: flex;215    justify-content: center;216    position: fixed;217    width: 100%;218  }219 220  .description p {221    align-items: center;222    inset: 0 0 auto;223    padding: 2rem 1rem 1.4rem;224    border-radius: 0;225    border: none;226    border-bottom: 1px solid rgba(var(--callout-border-rgb), 0.25);227    background: linear-gradient(to bottom,228        rgba(var(--background-start-rgb), 1),229        rgba(var(--callout-rgb), 0.5));230    background-clip: padding-box;231    backdrop-filter: blur(24px);232  }233 234  .description div {235    align-items: flex-end;236    pointer-events: none;237    inset: auto 0 0;238    padding: 2rem;239    height: 200px;240    background: linear-gradient(to bottom,241        transparent 0%,242        rgb(var(--background-end-rgb)) 40%);243    z-index: 1;244  }245}246 247@media (prefers-color-scheme: dark) {248  .vercelLogo {249    filter: invert(1);250  }251 252  .logo,253  .thirteen img {254    filter: invert(1) drop-shadow(0 0 0.3rem #ffffff70);255  }256}257 258@keyframes rotate {259  from {260    transform: rotate(360deg);261  }262 263  to {264    transform: rotate(0deg);265  }266}