first commit

2026-05-16 11:10:19 +02:00
commit 509c9b3737
172 changed files with 14496 additions and 0 deletions
@@ -0,0 +1,189 @@
+/* =========================
+   LOADER STYLES
+========================= */
+#loader {
+  position: fixed;
+  inset: 0;
+  background: #0a0a0c;
+  color: #c7c7d1;
+  display: flex;
+  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
+  z-index: 9999;
+  opacity: 1;
+  transition: opacity 0.8s ease;
+}
+
+.loader-left {
+  width: 48%;
+  padding: 80px 60px;
+}
+
+.ascii.big {
+  font-size: 18px;
+  line-height: 1.1;
+  letter-spacing: 2px;
+  color: #e2e2ff;
+}
+
+.subtitle {
+  margin-top: 30px;
+  font-size: 13px;
+  opacity: 0.6;
+  text-transform: uppercase;
+  letter-spacing: 4px;
+}
+
+.logs {
+  margin-top: 40px;
+  font-size: 12px;
+  opacity: 0.65;
+}
+
+.logs div {
+  margin-bottom: 8px;
+}
+
+.logs .ok {
+  opacity: 1;
+  color: #b6b6ff;
+}
+
+.loader-right {
+  flex: 1;
+  display: grid;
+  grid-template-columns: repeat(5, 1fr);
+  grid-auto-rows: 140px;
+  gap: 30px;
+  padding: 80px;
+}
+
+.square {
+  border: 1px solid rgba(255,255,255,0.15);
+  position: relative;
+  overflow: hidden; /* Ensures pixels stay within bounds */
+  opacity: 1;
+  transform: none;
+}
+
+.square canvas {
+  display: block; /* Removes any spacing issues */
+}
+
+/* Remove slide animations - squares stay static */
+.square.slide-in,
+.square.slide-out {
+  /* No animation */
+}
+
+.time {
+  opacity: 0.5;
+  margin-right: 8px;
+}
+
+.step {
+  opacity: 0;
+  transform: translateY(6px);
+  transition: opacity 0.4s ease, transform 0.4s ease;
+}
+
+.step.visible {
+  opacity: 1;
+  transform: translateY(0);
+}
+
+/* =========================
+   SMOOTH CROSSFADE
+========================= */
+/* Main content starts invisible */
+.container, 
+footer, 
+#bg-video, 
+#bg-image {
+  opacity: 0;
+  transition: opacity 0.8s ease;
+}
+
+/* When loading class is removed, content fades in */
+body:not(.loading) .container,
+body:not(.loading) footer,
+body:not(.loading) #bg-video,
+body:not(.loading) #bg-image {
+  opacity: 1;
+  visibility: visible;
+}
+
+/* Hide main site until loader starts fading */
+body.loading .container, 
+body.loading footer, 
+body.loading #bg-video, 
+body.loading #bg-image {
+  visibility: hidden;
+  opacity: 0;
+}
+
+/* Block scroll bar while loading */
+body.loading, 
+html:has(body.loading) {
+  overflow: hidden;
+}
+
+body.loading {
+  height: 100vh;
+}
+
+/* =========================
+   MOBILE / RESPONSIVE
+========================= */
+@media (max-width: 600px) {
+  .loader-left {
+    padding: 10px 0 0 0;
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+  }
+
+  .loader-left .ascii.big {
+    margin: 0;
+    padding: 0;
+    line-height: 1;
+    font-size: 10px;
+    letter-spacing: 1px;
+    white-space: pre;
+    overflow: hidden;
+    text-align: left;
+    display: block;
+  }
+
+  .loader-left .subtitle {
+    margin: 5px 0 0 0;
+    text-align: left;
+  }
+
+  .logs {
+    font-size: 10px;
+    margin: 5px 0 0 0;
+  }
+
+  .logs div {
+    white-space: normal;
+    word-break: break-word;
+  }
+
+  .loader-right {
+    grid-template-columns: repeat(3, 1fr);
+    grid-auto-rows: 100px;
+    gap: 15px;
+    padding: 20px;
+  }
+
+  .square {
+    border-width: 0.5px;
+  }
+}
+
+/* Very small screens: hide pixel grid */
+@media (max-width: 400px) {
+  .loader-right {
+    display: none;
+  }
+}