/* ========================================================= TICKRATE — Design System Brand idea: "tick rate" = el pulso de un servidor de juego. El motivo visual (línea + marcas + punto viajero) es el logo, el separador de secciones y el gráfico de lag/latencia. ========================================================= */ @import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@500;600;700&family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500;600&display=swap'); :root{ /* --- Color: base neutra (charcoal azulado, no negro puro) --- */ --bg: #0A0C10; --bg-panel: #12151B; --bg-panel-2:#171B22; --border: #232830; --border-soft: #1B1F26; --text: #E7EAEE; --text-dim: #9199A6; --text-faint:#5B6472; /* --- Señal de marca (traza tipo osciloscopio de red) --- */ --signal: #46E8C4; --signal-dim: #2B8F7D; --signal-glow: rgba(70,232,196,.35); /* --- Acentos por juego (se activan con data-game en ) --- */ --game-accent: var(--signal); --game-accent-dim: var(--signal-dim); --game-glow: var(--signal-glow); --radius-s: 6px; --radius-m: 10px; --radius-l: 18px; --maxw: 1180px; --font-display: "Space Grotesk", "Inter", sans-serif; --font-body: "Inter", -apple-system, sans-serif; --font-mono: "JetBrains Mono", ui-monospace, monospace; } body[data-game="minecraft"]{ --game-accent: #8BD450; --game-accent-dim: #4E7A2C; --game-glow: rgba(139,212,80,.32); } body[data-game="palworld"]{ --game-accent: #FF8A5C; --game-accent-dim: #A05436; --game-glow: rgba(255,138,92,.32); } body[data-game="abiotic"]{ --game-accent: #D6E45C; --game-accent-dim: #838C3A; --game-glow: rgba(214,228,92,.32); } *{box-sizing:border-box;} html{scroll-behavior:smooth;} @media (prefers-reduced-motion: reduce){ html{scroll-behavior:auto;} *{animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important;} } body{ margin:0; background:var(--bg); color:var(--text); font-family:var(--font-body); line-height:1.55; -webkit-font-smoothing:antialiased; } img{max-width:100%; display:block;} a{color:inherit;} h1,h2,h3,h4{ font-family:var(--font-display); font-weight:700; line-height:1.15; margin:0 0 .5em; letter-spacing:-0.01em; } h1{font-size:clamp(2.1rem, 4.4vw, 3.4rem);} h2{font-size:clamp(1.5rem, 2.6vw, 2.1rem);} h3{font-size:1.15rem;} p{margin:0 0 1em; color:var(--text-dim);} .mono{font-family:var(--font-mono);} .wrap{ max-width:var(--maxw); margin:0 auto; padding:0 24px; } /* Focus visibility (a11y) */ a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible{ outline:2px solid var(--signal); outline-offset:2px; } /* ---------------- NAV ---------------- */ .nav{ position:sticky; top:0; z-index:50; background:rgba(10,12,16,.86); backdrop-filter:blur(10px); border-bottom:1px solid var(--border-soft); } .nav .wrap{ display:flex; align-items:center; justify-content:space-between; height:68px; } .brand{ display:flex; align-items:center; gap:10px; font-family:var(--font-display); font-weight:700; font-size:1.15rem; text-decoration:none; color:var(--text); } .brand-pulse{width:34px; height:20px; flex:none;} .nav-links{ display:flex; align-items:center; gap:28px; list-style:none; margin:0; padding:0; } .nav-links a{ text-decoration:none; color:var(--text-dim); font-size:.92rem; font-weight:500; transition:color .15s ease; } .nav-links a:hover{color:var(--text);} .nav-cta{ display:flex; align-items:center; gap:14px; } .nav-toggle{ display:none; background:none;border:1px solid var(--border);border-radius:var(--radius-s); color:var(--text); width:40px; height:40px; cursor:pointer; } /* ---------------- BUTTONS ---------------- */ .btn{ display:inline-flex; align-items:center; justify-content:center; gap:8px; font-family:var(--font-body); font-weight:600; font-size:.95rem; padding:12px 20px; border-radius:var(--radius-s); text-decoration:none; cursor:pointer; border:1px solid transparent; transition:transform .12s ease, box-shadow .12s ease, background .15s ease, border-color .15s ease; white-space:nowrap; } .btn:active{transform:translateY(1px);} .btn-primary{ background:var(--signal); color:#06110D; box-shadow:0 0 0 0 var(--signal-glow); } .btn-primary:hover{box-shadow:0 6px 24px -6px var(--signal-glow);} .btn-ghost{ background:transparent; color:var(--text); border-color:var(--border); } .btn-ghost:hover{border-color:var(--text-faint);} .btn-game{ background:var(--game-accent); color:#06110D; } .btn-game:hover{box-shadow:0 6px 24px -6px var(--game-glow);} .btn-block{width:100%;} .btn-lg{padding:15px 26px; font-size:1rem;} /* ---------------- SECTIONS ---------------- */ section{padding:76px 0;} .section-tight{padding:48px 0;} .eyebrow{ font-family:var(--font-mono); font-size:.75rem; letter-spacing:.14em; text-transform:uppercase; color:var(--game-accent); display:inline-flex; align-items:center; gap:8px; margin-bottom:14px; } .eyebrow::before{ content:""; width:7px; height:7px; border-radius:50%; background:var(--game-accent); box-shadow:0 0 0 4px var(--game-glow); } /* Divider = motivo de "tick line" */ .tickline{ width:100%; height:26px; margin:8px 0 0; } /* ---------------- HERO ---------------- */ .hero{ padding:64px 0 40px; border-bottom:1px solid var(--border-soft); position:relative; overflow:hidden; } .hero-grid{ display:grid; grid-template-columns:1.1fr .9fr; gap:56px; align-items:center; } .hero h1{margin-bottom:18px;} .hero-lede{font-size:1.08rem; max-width:52ch;} .hero-actions{display:flex; gap:14px; margin-top:26px; flex-wrap:wrap;} .hero-stats{ display:flex; gap:28px; margin-top:38px; flex-wrap:wrap; } .stat b{ display:block; font-family:var(--font-mono); font-size:1.5rem; color:var(--text); } .stat span{font-size:.78rem; color:var(--text-faint); text-transform:uppercase; letter-spacing:.06em; display:inline-flex; align-items:center; gap:6px;} .ping-dot{ width:7px; height:7px; border-radius:50%; display:inline-block; background:var(--text-faint); transition:background-color .2s ease, box-shadow .2s ease; } .ping-dot--ok{background:var(--signal); box-shadow:0 0 0 3px var(--signal-glow);} .ping-dot--slow{background:#E0B33C; box-shadow:0 0 0 3px rgba(224,179,60,.3);} .ping-dot--down{background:#6B7280; box-shadow:none;} /* Panel de gráfico (before/after tick rate) */ .graph-card{ background:var(--bg-panel); border:1px solid var(--border); border-radius:var(--radius-l); padding:22px 24px 18px; } .graph-card .gc-head{ display:flex; justify-content:space-between; align-items:baseline; margin-bottom:10px; } .graph-card .gc-head span{font-family:var(--font-mono); font-size:.72rem; color:var(--text-faint); text-transform:uppercase; letter-spacing:.08em;} .graph-legend{display:flex; gap:18px; margin-top:14px; font-size:.8rem; color:var(--text-dim);} .graph-legend i{display:inline-block; width:10px; height:10px; border-radius:2px; margin-right:6px; vertical-align:-1px;} /* ---------------- CARDS / GRIDS ---------------- */ .grid{display:grid; gap:22px;} .grid-3{grid-template-columns:repeat(3,1fr);} .grid-2{grid-template-columns:repeat(2,1fr);} .card{ background:var(--bg-panel); border:1px solid var(--border); border-radius:var(--radius-m); padding:26px; } .card h3{margin-bottom:.4em;} .card p{margin-bottom:0;} .game-card{ display:block; text-decoration:none; background:var(--bg-panel); border:1px solid var(--border); border-radius:var(--radius-l); padding:26px; transition:border-color .15s ease, transform .15s ease; } .game-card:hover{transform:translateY(-3px);} .game-card .gc-tag{ font-family:var(--font-mono); font-size:.7rem; letter-spacing:.08em; text-transform:uppercase; color:var(--text-faint); margin-bottom:10px; display:block; } .game-card h3{color:var(--text); font-size:1.2rem;} .game-card p{font-size:.92rem;} .game-card[data-accent="minecraft"]{--gc:#8BD450;} .game-card[data-accent="palworld"]{--gc:#FF8A5C;} .game-card[data-accent="abiotic"]{--gc:#D6E45C;} .game-card:hover{border-color:var(--gc, var(--signal));} /* ---------------- TABLE (comparativa) ---------------- */ .table-wrap{overflow-x:auto; border:1px solid var(--border); border-radius:var(--radius-m);} table{width:100%; border-collapse:collapse; min-width:560px;} th,td{ text-align:left; padding:14px 18px; font-size:.92rem; border-bottom:1px solid var(--border-soft); } thead th{ font-family:var(--font-mono); font-size:.72rem; text-transform:uppercase; letter-spacing:.06em; color:var(--text-faint); background:var(--bg-panel-2); } tbody tr:last-child td{border-bottom:none;} td.yes{color:var(--signal);} td.no{color:var(--text-faint);} /* ---------------- STEPS (secuencia real) ---------------- */ .steps{counter-reset:step; display:grid; gap:0;} .step{ display:grid; grid-template-columns:44px 1fr; gap:18px; padding:20px 0; border-bottom:1px solid var(--border-soft); } .step:last-child{border-bottom:none;} .step-num{ counter-increment:step; font-family:var(--font-mono); color:var(--game-accent); display:flex; align-items:flex-start; justify-content:center; font-size:.95rem; padding-top:2px; } .step-num::before{content: counter(step, decimal-leading-zero);} /* ---------------- FAQ ---------------- */ .faq-item{ border-bottom:1px solid var(--border-soft); padding:20px 0; } .faq-item summary{ cursor:pointer; font-weight:600; font-size:1rem; list-style:none; display:flex; justify-content:space-between; align-items:center; gap:16px; } .faq-item summary::-webkit-details-marker{display:none;} .faq-item summary::after{ content:"+"; font-family:var(--font-mono); color:var(--game-accent); font-size:1.3rem; flex:none; } .faq-item[open] summary::after{content:"–";} .faq-item p{margin-top:12px;} /* ---------------- CREDIT BANNER (conversión) ---------------- */ .credit-banner{ background:linear-gradient(135deg, var(--bg-panel) 0%, var(--bg-panel-2) 100%); border:1px solid var(--border); border-radius:var(--radius-l); padding:40px; display:grid; grid-template-columns:1fr auto; gap:28px; align-items:center; position:relative; overflow:hidden; } .credit-banner::before{ content:""; position:absolute; inset:0; background:radial-gradient(600px 200px at 90% 0%, var(--game-glow), transparent 70%); pointer-events:none; } .credit-chip{ display:inline-flex; align-items:center; gap:8px; font-family:var(--font-mono); font-size:.78rem; letter-spacing:.04em; background:rgba(255,255,255,.04); border:1px solid var(--border); padding:6px 12px; border-radius:100px; color:var(--game-accent); margin-bottom:14px; } /* ---------------- FOOTER ---------------- */ footer{ border-top:1px solid var(--border-soft); padding:52px 0 32px; } .footer-grid{ display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr; gap:32px; margin-bottom:36px; } .footer-grid h4{font-size:.78rem; text-transform:uppercase; letter-spacing:.06em; color:var(--text-faint); margin-bottom:14px;} .footer-grid ul{list-style:none; margin:0; padding:0; display:grid; gap:10px;} .footer-grid a{text-decoration:none; color:var(--text-dim); font-size:.92rem;} .footer-grid a:hover{color:var(--text);} .footer-bottom{ display:flex; justify-content:space-between; align-items:center; padding-top:24px; border-top:1px solid var(--border-soft); font-size:.82rem; color:var(--text-faint); flex-wrap:wrap; gap:12px; } /* ---------------- RESPONSIVE ---------------- */ @media (max-width: 880px){ .hero-grid{grid-template-columns:1fr;} .grid-3{grid-template-columns:1fr;} .grid-2{grid-template-columns:1fr;} .footer-grid{grid-template-columns:1fr 1fr;} .credit-banner{grid-template-columns:1fr; text-align:left;} .nav-links{ position:fixed; top:68px; left:0; right:0; bottom:0; background:var(--bg); flex-direction:column; align-items:flex-start; padding:28px 24px; gap:22px; border-top:1px solid var(--border-soft); transform:translateX(100%); transition:transform .2s ease; } .nav-links.open{transform:translateX(0);} .nav-toggle{display:block;} .nav-cta .btn-ghost{display:none;} }