initial commit

2026-06-25 21:24:44 +00:00
commit ac8b4bd2e6
5 changed files with 273 additions and 0 deletions
@@ -0,0 +1,160 @@
+*{box-sizing:border-box;margin:0;padding:0}
+html,body{
+  background:#0a0c10;
+  color:#e8eaed;
+  font-family:'Inter',system-ui,-apple-system,sans-serif;
+  font-weight:400;
+  line-height:1.5;
+  min-height:100vh;
+  -webkit-font-smoothing:antialiased;
+}
+
+/* Subtle grid background across whole page */
+body::before{
+  content:"";position:fixed;inset:0;z-index:-2;pointer-events:none;
+  background:
+    linear-gradient(rgba(0,229,255,.035) 1px,transparent 1px) 0 0/48px 48px,
+    linear-gradient(90deg,rgba(0,229,255,.035) 1px,transparent 1px) 0 0/48px 48px,
+    radial-gradient(ellipse at 50% 0%,#0f141c 0%,#06080b 70%);
+}
+body::after{
+  content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;
+  box-shadow:inset 0 0 220px 60px rgba(0,0,0,.9);
+}
+
+/* HEADER with soldier image banner */
+.site-header{
+  position:relative;
+  border-bottom:1px solid #1a2230;
+  padding:4.5rem 1.5rem 4rem;
+  overflow:hidden;
+  isolation:isolate;
+}
+.site-header::before{
+  content:"";position:absolute;inset:0;z-index:-2;
+  background:url('../images/TeamGattaca1.png') center/cover no-repeat;
+  filter:brightness(.32) contrast(1.1) saturate(.85) hue-rotate(-10deg);
+  transform:scale(1.05);
+}
+.site-header::after{
+  content:"";position:absolute;inset:0;z-index:-1;
+  background:
+    linear-gradient(180deg,rgba(10,12,16,.5) 0%,rgba(10,12,16,.85) 70%,#0a0c10 100%),
+    linear-gradient(90deg,rgba(10,12,16,.6) 0%,transparent 50%,rgba(10,12,16,.6) 100%);
+}
+.header-inner{
+  max-width:1100px;margin:0 auto;
+  display:flex;flex-direction:column;align-items:center;text-align:center;gap:1.2rem;
+  position:relative;
+}
+.logo{
+  height:150px;width:auto;
+  filter:drop-shadow(0 8px 24px rgba(0,0,0,.7));
+}
+.tagline{background:linear-gradient(180deg,#ffffff 0%,#7fdfff 100%);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
+  font-family:'Chakra Petch','Inter',sans-serif;
+  font-size:clamp(2rem,4.5vw,3.4rem);
+  font-weight:700;letter-spacing:.005em;line-height:1.1;
+  color:#cfe8f5;
+  text-shadow:0 2px 18px rgba(0,0,0,.65);
+  text-transform:uppercase;
+  position:relative;
+  padding-bottom:.9rem;
+}
+.tagline::after{
+  content:"";
+  position:absolute;left:50%;bottom:0;
+  transform:translateX(-50%) skewX(-20deg);
+  width:90px;height:3px;
+  background:linear-gradient(90deg,transparent,#00e5ff,transparent);
+  box-shadow:0 0 14px rgba(0,229,255,.6);
+}
+.sub{
+  color:#a8b0bc;font-size:1.1rem;max-width:540px;font-weight:500;
+  letter-spacing:.01em;
+}
+
+/* MAIN */
+.container{
+  max-width:1200px;margin:0 auto;padding:3.5rem 1.5rem 4rem;
+}
+.section-label{
+  display:flex;align-items:center;gap:1rem;margin-bottom:1.75rem;
+}
+.section-label span{
+  font-family:'Chakra Petch','Inter',sans-serif;
+  font-size:.85rem;font-weight:700;letter-spacing:.32em;
+  text-transform:uppercase;color:#00e5ff;
+  text-shadow:0 0 12px rgba(0,229,255,.35);
+}
+.section-label .line{
+  flex:1;height:1px;background:linear-gradient(90deg,rgba(0,229,255,.4),transparent);
+}
+
+/* GRID */
+.grid{
+  display:grid;
+  grid-template-columns:repeat(auto-fill,minmax(260px,1fr));
+  gap:1.25rem;
+}
+.tile{
+  position:relative;
+  background:#11141b;
+  border:1px solid #1f2530;
+  border-radius:10px;
+  overflow:hidden;
+  text-decoration:none;color:inherit;
+  display:flex;flex-direction:column;
+  transition:transform .2s ease, border-color .2s ease, background .2s ease, box-shadow .2s ease;
+}
+.tile::before{
+  content:"";position:absolute;top:0;left:0;right:0;height:2px;
+  background:linear-gradient(90deg,transparent,#00e5ff,transparent);
+  opacity:0;transition:opacity .25s ease;
+}
+.tile:hover{
+  transform:translateY(-4px);
+  border-color:#2a3848;
+  background:#151923;
+  box-shadow:0 8px 28px rgba(0,0,0,.55), 0 0 22px rgba(0,229,255,.08);
+}
+.tile:hover::before{opacity:1}
+.tile-cover{
+  height:130px;
+  border-bottom:1px solid #1f2530;
+  position:relative;
+}
+.tile-cover::after{
+  content:"";position:absolute;inset:0;
+  background:repeating-linear-gradient(45deg,transparent 0 12px,rgba(0,229,255,.04) 12px 24px);
+}
+.tile-body{
+  padding:1.1rem 1.2rem 1.3rem;
+}
+.tile-body h2{
+  font-family:'Chakra Petch','Inter',sans-serif;
+  font-size:1.3rem;font-weight:700;letter-spacing:.01em;
+  margin-bottom:.3rem;color:#cfe8f5;
+  text-transform:uppercase;
+}
+.tile-body p{
+  font-size:.92rem;color:#9aa0a8;font-weight:500;
+}
+.tile-soon{
+  opacity:.55;pointer-events:none;
+}
+
+/* FOOTER */
+.site-footer{
+  border-top:1px solid #1a2230;
+  padding:1.5rem;
+  text-align:center;
+  color:#6b7079;font-size:.85rem;
+  font-family:'Chakra Petch','Inter',sans-serif;
+  letter-spacing:.08em;
+}
+
+@media (max-width:520px){
+  .logo{height:110px}
+  .site-header{padding:3rem 1.5rem 2.5rem}
+}
@@ -0,0 +1,71 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1.0">
+<title>Team Gattaca</title>
+<meta name="description" content="A hub for our game guide sites.">
+<link rel="icon" type="image/png" href="images/TeamGattaca2.png">
+<link rel="preconnect" href="https://fonts.googleapis.com">
+<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+<link href="https://fonts.googleapis.com/css2?family=Chakra+Petch:wght@500;600;700&family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet">
+<link rel="stylesheet" href="css/style.css?v=5">
+</head>
+<body>
+
+<header class="site-header">
+  <div class="header-inner">
+    <img src="images/TeamGattaca2.png" alt="Team Gattaca" class="logo">
+    <h1 class="tagline">Team Gattaca Game Hub</h1>
+    <p class="sub">Guides, maps, and strategies — all in one place.</p>
+  </div>
+</header>
+
+<main class="container">
+  <div class="section-label">
+    <span>Games</span>
+    <div class="line"></div>
+  </div>
+
+  <div class="grid">
+    <a class="tile" href="https://eft.thedarkelite.com" target="_blank" rel="noopener">
+      <div class="tile-cover" style="background:linear-gradient(135deg,#2a3340,#0f1318);"></div>
+      <div class="tile-body">
+        <h2>Escape From Tarkov</h2>
+        <p>Maps, Goons, Flea Market, and more!</p>
+      </div>
+    </a>
+
+    <div class="tile tile-soon">
+      <div class="tile-cover" style="background:linear-gradient(135deg,#1f1f24,#0c0c10);"></div>
+      <div class="tile-body">
+        <h2>Coming Soon</h2>
+        <p>Another site on the way.</p>
+      </div>
+    </div>
+
+    <div class="tile tile-soon">
+      <div class="tile-cover" style="background:linear-gradient(135deg,#1f1f24,#0c0c10);"></div>
+      <div class="tile-body">
+        <h2>Coming Soon</h2>
+        <p>Another site on the way.</p>
+      </div>
+    </div>
+
+    <div class="tile tile-soon">
+      <div class="tile-cover" style="background:linear-gradient(135deg,#1f1f24,#0c0c10);"></div>
+      <div class="tile-body">
+        <h2>Coming Soon</h2>
+        <p>Another site on the way.</p>
+      </div>
+    </div>
+  </div>
+</main>
+
+<footer class="site-footer">
+  <p>&copy; <span id="year"></span> Team Gattaca</p>
+</footer>
+
+<script>document.getElementById('year').textContent = new Date().getFullYear();</script>
+</body>
+</html>
@@ -0,0 +1,42 @@
+document.getElementById('year').textContent = new Date().getFullYear();
+
+const gameCount = document.querySelectorAll('.cards .card:not(.card-locked)').length;
+
+function animateCount(el, target){
+  let n = 0;
+  const step = Math.max(1, Math.ceil(target / 20));
+  const t = setInterval(() => {
+    n += step;
+    if (n >= target){ n = target; clearInterval(t); }
+    el.textContent = String(n).padStart(2,'0');
+  }, 50);
+}
+animateCount(document.getElementById('stat-games'), gameCount);
+
+const today = new Date();
+document.getElementById('stat-date').textContent =
+  String(today.getMonth()+1).padStart(2,'0') + '.' +
+  String(today.getDate()).padStart(2,'0') + '.' +
+  String(today.getFullYear()).slice(-2);
+
+const filterBtns = document.querySelectorAll('.filter-btn');
+const cards = document.querySelectorAll('.cards .card');
+filterBtns.forEach(btn => {
+  btn.addEventListener('click', () => {
+    filterBtns.forEach(b => b.classList.remove('active'));
+    btn.classList.add('active');
+    const f = btn.dataset.filter;
+    cards.forEach(c => {
+      if (f === 'all' || c.dataset.cat === f) c.classList.remove('hidden');
+      else c.classList.add('hidden');
+    });
+  });
+});
+
+const heroBg = document.querySelector('.hero-bg');
+window.addEventListener('scroll', () => {
+  const y = window.scrollY;
+  if (y < window.innerHeight) heroBg.style.transform = `scale(1.05) translateY(${y * 0.15}px)`;
+}, { passive: true });
+
+console.log('%c// GAME HUB // online','color:#a8b84a;font-family:monospace;font-size:14px');