/* NOLIFER: designový systém "Arena" (2a). Sdílená vrstva pro všechny stránky sítě světů (High Five, Essence, World III). Zdroj hodnot: design/brand/tokens.css + design/Redesign Homepage Options.dc.html (2a), design/Redesign Server Page.dc.html, design/Redesign Statistics.dc.html. Obsah: 1. tokeny + odvozené hodnoty + akcent světa (body[data-world]) 2. keyframes + vypnutí pohybu 3. reset, typografie, utility 4. tlačítka 5. horní lišta (nav partial), přepínač světů, jazyk, burger, drawer 6. sub-nav světa + liveline 7. proužek eventu 8. hero + jiskry + ticker 9. homepage sekce: worlds, nums, rates, promises, latest 10. patička 11. world stránky: rates & rules (rr-*), statistiky (st-*), chips 12. obecné: panel, card, badge, formuláře, tabulky, reveal, empty, msg, chart, map 13. focus + responsivita */ /* ========================================================================== 1. TOKENY ========================================================================== */ :root{ --bg:#07070a; --panel:#0d0d12; --fg:#f2efe9; --fg2:#bfb9ae; --muted:#8f8a80; --line:rgba(255,255,255,.07); --ok:#7dc98a; --beta:#e8c877; --off:#9a917f; --w-hf:#f2b632; --w-ess:oklch(0.72 0.19 355); --w-next:oklch(0.75 0.15 220); --accent:var(--w-hf); --font-display:'Unbounded',sans-serif; --font-body:'Manrope',system-ui,sans-serif; --font-mono:'IBM Plex Mono',monospace; --r-pill:100px; --r-card:16px; --nav-h:76px; --subnav-h:46px; /* odvozené (spec_homepage_2a.tokens + spec_world_pages.notes) */ --danger:#d97b6c; --glow:rgba(242,182,50,.55); --glow-soft:rgba(242,182,50,.28); --ink:#0b0a08; /* text na akcentu a na bílém pillu */ --ok-frame:rgba(125,201,138,.35); /* --ok @ 35 % (rámeček Allowed) */ --danger-frame:rgba(217,123,108,.35);/* --danger @ 35 % (rámeček Never) */ --line-04:rgba(255,255,255,.04); /* dělič řádků tabulky */ --line-05:rgba(255,255,255,.05); /* aktivní položka sub-nav / sidebar */ --line-08:rgba(255,255,255,.08); /* pill přepínače, neaktivní world karta */ --line-10:rgba(255,255,255,.1); /* ticker */ --line-12:rgba(255,255,255,.12); /* LIVE pill */ --line-14:rgba(255,255,255,.14); /* Account outline */ --glass-06:rgba(255,255,255,.06); --overlay-55:rgba(7,7,10,.55); --overlay-60:rgba(7,7,10,.6); --overlay-70:rgba(7,7,10,.7); --overlay-90:rgba(7,7,10,.9); --ease:cubic-bezier(.22,.61,.36,1); --wrap:1280px; /* vodorovný okraj pásů: 36px, na širokých obrazovkách vycentruje 1280px obsah */ --gx:max(36px, calc(50% - 604px)); --sticky-top:calc(var(--nav-h) + var(--subnav-h) + 16px); } /* akcent světa: přepíná world.js přes body[data-world]; výchozí = hf */ body[data-world="hf"]{--accent:var(--w-hf);--glow:rgba(242,182,50,.55);--glow-soft:rgba(242,182,50,.28)} body[data-world="ess"]{--accent:var(--w-ess);--glow:oklch(0.72 0.19 355 / .55);--glow-soft:oklch(0.72 0.19 355 / .28)} body[data-world="next"]{--accent:var(--w-next);--glow:oklch(0.75 0.15 220 / .55);--glow-soft:oklch(0.75 0.15 220 / .28)} /* lokální přebarvení prvku (karta světa, štítek novinky) */ [data-accent="hf"]{--accent:var(--w-hf)} [data-accent="ess"]{--accent:var(--w-ess)} [data-accent="next"]{--accent:var(--w-next)} [data-accent="net"]{--accent:var(--fg)} /* ========================================================================== 2. KEYFRAMES (tokens.css, doslova) ========================================================================== */ @keyframes pulse{50%{opacity:.5}} @keyframes drift{from{transform:scale(1.08) translate3d(-1.5%,0,0)}to{transform:scale(1.16) translate3d(1.5%,-2%,0)}} @keyframes ember{0%{transform:translate3d(0,0,0) scale(1);opacity:0}15%{opacity:.9}100%{transform:translate3d(var(--dx),-120vh,0) scale(.2);opacity:0}} @keyframes marquee{from{transform:translateX(0)}to{transform:translateX(-50%)}} @keyframes glow{0%,100%{box-shadow:0 0 0 0 rgba(255,255,255,0)}50%{box-shadow:0 0 34px 4px var(--g)}} @keyframes rise{from{opacity:0;transform:translateY(24px)}to{opacity:1;transform:none}} @keyframes spin{to{transform:rotate(360deg)}} @keyframes scan{from{background-position:0 0}to{background-position:0 64px}} @keyframes slidein{from{clip-path:inset(0 100% 0 0)}to{clip-path:inset(0 0 0 0)}} @media (prefers-reduced-motion: reduce){*{animation:none!important}} /* ========================================================================== 3. RESET, TYPOGRAFIE, UTILITY ========================================================================== */ *{margin:0;padding:0;box-sizing:border-box} html{scroll-behavior:smooth;-webkit-text-size-adjust:100%} body{background:var(--bg);color:var(--fg);font-family:var(--font-body); font-size:16px;line-height:1.55;-webkit-font-smoothing:antialiased;overflow-x:hidden} ::selection{background:var(--accent);color:var(--ink)} a{color:var(--accent);text-decoration:none} a:hover{color:var(--fg)} img,svg,video{max-width:100%;display:inline-block;vertical-align:middle} button,input,select,textarea{font:inherit;color:inherit} button{background:none;border:0;cursor:pointer} h1,h2,h3,h4,.display{font-family:var(--font-display);font-weight:700;line-height:1.1;letter-spacing:0} h1{font-weight:900} h1,h2,h3{text-wrap:balance} p{text-wrap:pretty} strong,b{font-weight:700} code,kbd,.mono{font-family:var(--font-mono)} .mono,.kicker,.label{font:500 .74rem var(--font-mono);letter-spacing:.12em;text-transform:uppercase} .kicker{color:var(--accent)} .label{color:var(--muted)} .muted{color:var(--muted)} .fg2{color:var(--fg2)} .accent{color:var(--accent)} .num{font-variant-numeric:tabular-nums} .wrap{max-width:var(--wrap);margin:0 auto;padding:0 36px} .section{padding:64px var(--gx);border-top:1px solid var(--line)} .section-head{display:flex;align-items:baseline;justify-content:space-between;gap:20px;margin-bottom:28px} .section-head h2{margin:0;font:800 2.4rem var(--font-display);letter-spacing:-.02em} .section-head .kicker{color:var(--muted)} .dot{display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--off);flex:none} .dot.live,.dot.on{background:var(--ok)} .dot.beta{background:var(--beta)} .dot.announced,.dot.off{background:var(--off)} .dot.pulse{animation:pulse 2s infinite} [hidden]{display:none!important} .sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0} /* ========================================================================== 4. TLAČÍTKA (všechny pill, text na akcentu = --ink) ========================================================================== */ .btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;padding:12px 22px; border-radius:var(--r-pill);font-weight:800;font-size:.9rem;cursor:pointer;border:0; font-family:inherit;white-space:nowrap; transition:transform .15s,background .2s,border-color .2s,box-shadow .2s,color .2s} .btn:active{transform:translateY(1px)} .btn small{font:500 .74rem var(--font-mono);opacity:.6} .btn-accent,.btn-gold{background:var(--accent);color:var(--ink)} .btn-accent:hover,.btn-gold:hover{color:var(--ink);box-shadow:0 8px 24px var(--glow-soft);transform:translateY(-1px)} .btn-outline,.btn-ghost{padding:11px 16px;border-radius:var(--r-pill);font-weight:700;font-size:.86rem; color:var(--fg);border:1px solid var(--line-14);background:transparent;white-space:nowrap; transition:border-color .2s,color .2s,background .2s} .btn-outline:hover,.btn-ghost:hover{border-color:var(--fg);color:var(--fg);background:var(--line-05)} .btn-play{--g:var(--glow);padding:11px 22px;border-radius:var(--r-pill);font-weight:800;font-size:.86rem; color:var(--ink);background:var(--accent);white-space:nowrap;animation:glow 2.8s ease-in-out infinite} .btn-play:hover{color:var(--ink);filter:brightness(1.06)} .btn-white,.btn-dl{display:inline-flex;align-items:center;gap:12px;padding:16px 26px;border-radius:var(--r-pill); font-weight:800;color:var(--ink);background:var(--fg);white-space:nowrap;transition:transform .2s,box-shadow .2s} .btn-white:hover,.btn-dl:hover{color:var(--ink);transform:translateY(-2px);box-shadow:0 12px 30px rgba(0,0,0,.45)} .btn-white .size,.btn-dl .size{font:500 .74rem var(--font-mono);opacity:.6} .btn[disabled],.btn:disabled{opacity:.5;cursor:not-allowed;transform:none;box-shadow:none} /* ========================================================================== 5. HORNÍ LIŠTA (partial nav.html)